import { Descriptions,Modal,Empty,Image,Tag,Table,Divider } from 'antd';
import type { DescriptionsProps } from 'antd';
import { useState } from 'react';
import { useEffect } from 'react';

import styles from './index.module.scss';
import { req } from '@/common/methods';

const depart = {};
const suppliers = {};

const GoodsDetail  = props => {
    const descItems: DescriptionsProps['items'] =  (()=>{
        //console.log(props);
        if(typeof props.detail !== "object" || typeof props.dataCategory !== "object"){
            Modal.error({title:'出错',content:<>无法获取props参数</>})
        }
        let res = [
            {key:'id',label:'惟一标识符',span:3,children:props.detail.id},
            {key:'name',label:'名称',children:props.detail.name},
            {key:'category',label:'类别',children:(()=>{
                const find = props.dataCategory.find(item => item.id === props.detail.category);
                return find?find.name:props.detail.category;
            })()},
            {key:'local',label:'区域',children:(()=>{
                const local = [undefined,'东仓'];
                return local[props.detail.local] || props.detail.local;
            })()},
            {key:'img',label:'参考图',children:props.detail.img ? <>\
                <Image src={props.detail.img} alt={props.detail.name} height={25}/>
            </> : <span style={{opacity:0.5}}>无</span>},
            {key:'detail',label:'简介',span:2,children:props.detail.detail},
            {key:'specs',label:'规格',children:props.detail.specs},
            {key:'unit',label:'单位',children:props.detail.unit},
            {key:'count',label:'数量',children:props.detail.count},
            {key:'another_name',label:'别名',span:2,children:<>
                {props.detail.another_name && props.detail.another_name.replace(/\,|\，/g," ").split(" ").map((item,index) => <Tag key={index}>{item}</Tag>)}
            </>},
            {key:'more_meter',label:'其他单位',children:props.detail.more_meter},
            {key:'create_time',label:'创建时间',children:props.detail.create_time},
            {key:'update_time',label:'修改时间',children:props.detail.update_time},
            {key:'delete_time',label:'删除时间',children:props.detail.delete_time},

        ];
        /*
        for(let key in  props.detail){
            res.push({
                key,
                label:key,
                children:props.detail[key]
            });
        }
        */
        return res;
    })();
    // const [descItems,setDescItems] = useState([]);
    // handleDescItems = () => {

    // }
    // useEffect(()=>{
    //     handleDescItems();
    // },[]);
    const columns = [
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '方式',
            dataIndex: 'method',
            key: 'method',
            render: (text,currentItem) => {
                if(!currentItem || typeof currentItem.change_count !== 'number' || ![10,20,30].includes(text)){
                    return <span style={{color:'gray'}}>{`未知[${text}]`}</span>
                }
                const {change_count} = currentItem;
                const o = {
                    10:['进货','退货','供货商对接'],
                    20:['收回','领用','部门对接'],
                    30:['盘盈','盘亏','盘点']
                };
                const oc = {
                    10:'blue',
                    20:'green',
                    30:'red'
                }
                const i = change_count > 0 ? 0 : change_count<0 ? 1 :2;
                return <span style={{color:oc[Number(text)]}}>{o[Number(text)][i]}</span>;
            },
        },
        {
            title: '之前',
            dataIndex: 'before_count',
            key: 'before_count',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '变化',
            dataIndex: 'change_count',
            key: 'change_count',
            render: (text) => <span>{text>0 ? `+${text}` : text}</span>,
        },
        {
            title: '之后',
            dataIndex: 'after_count',
            key: 'after_count',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '部门/供货商',
            dataIndex: 'depart',
            key: 'depart',
            render: (text,currentItem) => {
                if(currentItem && currentItem.method){
                    const {method} = currentItem;
                    if(method === 10){
                        return suppliers[text] || '未知['+method+']';
                    }else if(method === 20){
                        return depart[text] || '未知['+method+']';
                    }else{
                        return '-';
                    }
                }
                return <span style={{opacity:0.5}}>无</span>;
            },
        },
        {
            title: '申请人/进货人',
            dataIndex: 'requ',
            key: 'requ',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '领用人/确认人',
            dataIndex: 'empl',
            key: 'empl',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            render: (text) => <span>{text}</span>,
        },
    ];
    const [goodsDetailData,setGoodsDetailData] = useState([]);
    const fetchDetailData = () => {
        req('/api/depart/get').then(data => {
            data.forEach(item => depart[item.id] = item.name);
            //console.log(depart);
            return req('/api/suppliers/get');
        }).then(data => {
            data.forEach(item => suppliers[item.id] = item.name);
            return req('/api/storage/detail_by_id',{id:props.detail.id},'get');
        }).then(data => {
            setGoodsDetailData(data.map(item => ({...item,key:item.id})));
        }).catch(error=>{
            Modal.error({
                title:'出错',
                content:<>无法获取有效的详情数据,{''+error}</>
            });
        })
    }
    useEffect(()=>{
        fetchDetailData();
    },[])
    return <>
        <Descriptions bordered={true} size="small" items={descItems}/>
        <Divider orientation="center" plain>近期出入库数据</Divider>
        <div className={styles['detail-pkg']}>
            <Table columns={columns} dataSource={goodsDetailData} size="small" pagination={false} scroll={{
                scrollToFirstRowOnChange:true,
                x:false,
                y:200
            }}></Table>
        </div>
    </>
}
export default GoodsDetail;